import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar } from '@/components'
import { AtButton, AtCountdown, AtTimeline, AtList, AtListItem, AtCurtain, AtIcon } from 'taro-ui'
import './advanceorderdetail.scss'

const bgImages = require('../assets/bgImages.png');
const check = require('../assets/check.png');
const rightarrow = require('../assets/rightarrow.png');

export default class AdvanceorderdetailBox extends Component {

  constructor(props) {
    super(props)
    this.state = {
      status: 1,
      itemLeft: '',
      itemRight: '',
      endStatus: 1,
      //幕帘状态
      isOpened: true,
      list: [
        {
          text: "撤回订单",
          info: [
            {
              text: "申请资料"
            }
          ]
        },
        {
          text: "查验车辆",
          info: [
            {
              text: "申请资料"
            }
          ]
        },
        {
          text: "查看物流",
          info: [
            {
              text: "申请资料"
            },
            {
              text: "验车照片"
            }
          ]
        },
        {
          text: "确认信息",
          info: [
            {
              text: "申请资料"
            },
            {
              text: "验车照片"
            },
            {
              text: "物流信息"
            }
          ]
        },
        {
          text: "",
          info: [
            {
              text: "申请资料"
            },
            {
              text: "验车照片"
            },
            {
              text: "物流信息"
            },
            {
              text: "合同凭证"
            }
          ]
        },
      ],
      logisticslist: [
        { date: '2019-11-12', time: '14:31', address: '车辆已到达目的地，广东省广州市员村一横路7号' },
        { date: '2019-11-12', time: '14:31', address: '车辆到达广东省广州市' },
        { date: '2019-11-12', time: '14:31', address: '车辆到达广东省深圳市' },
        { date: '2019-11-12', time: '14:31', address: '物流已提车' }
      ]
    }
  }
  onClickLeftIcon(){
  	 Taro.navigateTo({
  		 url:'/pages/advanceorder/advanceorder'
  	 }) 
  }
  handleChange() {
    this.setState({
      isOpened: true
    })
  }
  onClose() {
    this.setState({
      isOpened: false
    })
  }
  componentWillMount() {
    let { status } = this.$router.params
    this.setState({
      status
    }, () => {
      this.getEndStatus()
    })
  }

  getIndexStatus(status) {
    return {
      $1: 0,
      $2: 1,
      $3: 2,
      $4: 3,
      $5: 4,
      $6: 4,
      $7: 4
    }[`$${status}`]

  }

  getStatusTitle(status) {
    return {
      $1: '待审核',
      $2: '待验车',
      $3: '运输中',
      $4: '待确认',
      $5: '交易成功',
      $6: '审核未通过',
      $7: '交易异常'
    }[`$${status}`]
  }

  getEndStatus() {
    let { list, status } = this.state
    let itemList = {}
    if (status === '6') {
      itemList = {
        text: '重新提交',
        info: [
          {
            text: "申请资料"
          }
        ]

      }

    } else if (status === '7') {
      itemList = {
        text: '',
        info: []

      }

    }
    list[4] = itemList
    this.setState({
      list
    })
  }
  onTimeUp() {
    Taro.showToast({
      title: '时间到',
      icon: 'success',
      duration: 2000
    })
  }

  handleClick() { }

  render() {
    const {
      status, endStatus, list, logisticslist
    } = this.state
    const itemhtml = (status) => {
      let itemLeft = '', itemRight = ''
      switch (status) {
        case '1':
          itemLeft = '资金方正在审核，请耐心等待'
          // })
          break;
        case '2':
          itemLeft = '请查看验车照片查验车辆'
          break;
        case '3':
          itemLeft = '车辆正在路上，您可查看物流信息'
          break;
        case '4':
          itemLeft = '请确认资金方所上传的资料'
          itemRight = '系统将自动确认'
          break;
        case '5':
          itemLeft = '亲，恭喜你成功完成一笔订单！'
          break;
        case '6':
          itemLeft = '很遗憾，您的代购申请未通过审核，您可再次提交申请'
          break;
        case '7':
          itemLeft = '您的订单交易异常，平台客服已介入并终止'
          break;
        default:
          break;
      }
      return <View className='item_title'>
        <Text className='item_title__left'>{itemLeft}</Text>
        <Text className='item_title__right'>{itemRight}</Text>
      </View>

    }
    const atListhtml = (status, endStatus) => {
      // console.log("indexStatus-->",this.getIndexStatus(status))
      let i = this.getIndexStatus(status)
      let itemlist = list[i]
      let { text, info } = itemlist?itemlist:{text:'',info:''}

      return <View>
        <View className="b_advanceorderdetail__info">
          <AtList>
            {
              info && info.map((item, i) => {
                return <AtListItem title={item.text} arrow='right' onClick={this.handleClick.bind(this)} />
              })
            }

          </AtList>
        </View>
        {
          text && <View className='b_advanceorderdetail__footer'>
            <AtButton className='item_btn' onClick={this.handleChange.bind(this)}>{text}</AtButton>
          </View>
        }
        {
          <AtCurtain
            isOpened={this.state.isOpened}
            onClose={this.onClose.bind(this)}
          >
            <View className='b_advanceorderdetail__curtain'>
              <View className='b_advanceorderdetail__curtain_header'>
                <Text>物流信息</Text>
              </View>
              <View className='b_advanceorderdetail__curtain_address'>
                <View className='b_advanceorderdetail__curtain_address_startaddress'>
                  <Text className='b_advanceorderdetail__curtain_address_top'>始发地</Text>
                  <Text className='b_advanceorderdetail__curtain_address_bottom'>汕尾市</Text>
                </View>
                <View className='b_advanceorderdetail__curtain_address_icon'>
                  <Image src={rightarrow} className='b_advanceorderdetail__curtain_address_icon'></Image>
                </View>
                <View className='b_advanceorderdetail__curtain_address_endaddress'>
                  <Text className='b_advanceorderdetail__curtain_address_top'>目的地</Text>
                  <Text className='b_advanceorderdetail__curtain_address_bottom'>广州市</Text>
                </View>
              </View>
              <View className='b_advanceorderdetail__curtain_content'>
                {
                  logisticslist && logisticslist.map((item, i) => {
                    return <View className='b_advanceorderdetail__curtain_content_item'>
                      <View className='content_item_left'>
                        <Text className='content_item_left_date'>{item.date}</Text>
                        <Text className='content_item_left_time'>{item.time}</Text>
                      </View>
                      <View className='content_item_middle'>
                        {/* <AtIcon value='user'></AtIcon> */}
                        {/* <AtTimeline items={item.address}></AtTimeline> */}
                      </View>
                      <View className='content_item_right'>
                        <Text>{item.address}</Text>
                      </View>
                    </View>
                  })

                }
              </View>
            </View>
          </AtCurtain>
        }
      </View>
    }
    return (
      <View className="b_advanceorderdetail">
        <Image src={bgImages} className='b_advanceorderdetail__images'></Image>
         <DNavBar title='代购订单' status={true} onClickLeftIcon={this.onClickLeftIcon} className='b_advanceorderdetail__nav'></DNavBar>
        <View className="b_advanceorderdetail__box">
          <View className='b_advanceorderdetail__header'>
            <View className='item_title'>
              <View className='item_title__left'>
                <Image src={check} className='item_title__left_image'></Image>
                <Text className='item_title__left_text'>{this.getStatusTitle(status)}</Text>
              </View>
            </View>
          </View>
          <View className="b_advanceorderdetail__content">
            <View className='item_title'>
              <View className='item_title__left'>
                <Text>订单编号：</Text>
                <Text>CL20191111001</Text>
              </View>
              {
                status == '5' &&
                <View className='item_title__right'>
                  <Text>剩余</Text>
                  {/* <Text>0时30分</Text> */}
                  <AtCountdown
                    format={{ hours: ':', minutes: ':', seconds: '' }}
                    hours={0}
                    minutes={30}
                    onTimeUp={this.onTimeUp.bind(this)}
                  />
                </View>
              }

            </View>
            {itemhtml(status, endStatus)}
            <View className='b_advanceorderdetail__content_box'>
            </View>
          </View>
          <View className="b_advanceorderdetail__info">
            <Text className='b_advanceorderdetail__info_title b_advanceorderdetail__info_firsttitle'>基本信息</Text>
            <View className="item_title">
              <Text className="item_title__left">卖家名称</Text>
              <Text className="item_title__right">深圳腾讯计算机科技有限公司</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">联系方式</Text>
              <Text className="item_title__right">13643010000</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">尾款进账公司名</Text>
              <Text className="item_title__right">深圳腾讯计算机科技有限公司</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">用款天数</Text>
              <Text className="item_title__right">7天</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">用款日期</Text>
              <Text className="item_title__right">2019-11-11</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">选择车型</Text>
              <Text className="item_title__right">保时捷718 2018款 Cayman 2.0T</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">代购金额</Text>
              <Text className="item_title__right">15.00万</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">合同金额</Text>
              <Text className="item_title__right">33.88万</Text>
            </View>
          </View>
          <View className="b_advanceorderdetail__info">
            <Text className='b_advanceorderdetail__info_title '>车辆信息</Text>
            <View className="item_title">
              <Text className="item_title__left">外观颜色</Text>
              <Text className="item_title__right">白色</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">内饰颜色</Text>
              <Text className="item_title__right">黑色</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">车架号</Text>
              <Text className="item_title__right">AL90878765756</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">物流始发地</Text>
              <Text className="item_title__right">广东省广州市</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">内饰颜色</Text>
              <Text className="item_title__right">其他：绿色</Text>
            </View>
          </View>
          <View className="b_advanceorderdetail__info">
            <Text className='b_advanceorderdetail__info_title '>监管信息</Text>
            <View className="item_title">
              <Text className="item_title__left">监管方式</Text>
              <Text className="item_title__right">证件抵押</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">监管地址</Text>
              <Text className="item_title__right">广州市天河区员村四横路1号</Text>
            </View>
          </View>
          {atListhtml(status, endStatus)}
          {/* <View className="b_advanceorderdetail__info">
            <AtList>
              <AtListItem title='申请资料' arrow='right' onClick={this.handleClick} />
            </AtList>
          </View> */}
          {/* <View className='b_advanceorderdetail__footer'>
            <AtButton className='item_btn'>提交登记</AtButton>
          </View> */}
        </View>
      </View>
    )
  }
}
